<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>05-userList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/containerWrapping.css">
</head>
<body>
  <div class="container container-wrapping">
    <h3>用户记录：</h3>
    <hr>
    <br>
    <!-- User记录 -->
    <div class="userListTable table-responsive">
      <table class="table table-hover text-center table-sm">
        <thead>
          <tr class="">
            <th scope="col">#</th>
            <th scope="col">用户名</th>
            <th scope="col">真实姓名</th>
            <th scope="col">手机号码</th>
            <th scope="col">邮箱</th>
            <th scope="col">详情</th>
            <th scope="col">操作</th>
          </tr>         
        </thead>
        <tbody>
          <c:forEach items="${userList }" var="user" varStatus="vs">
	          <tr>
	            <th scope="row">${vs.count }</th>
	            <td>${user.username }</td>
	            <td>${user.realname }</td>
	            <td>${user.cellphone }</td>
	            <td>${user.email }</td>
	            <td><a href="#" class="alert-link" data-toggle="modal" data-target="#showUserDetail" onclick="showUserDetailByUid('${user.uid}')">详情</a></td>          
	            <td><a href="#" class="alert-link deleteRecordA" onclick="deleteUserByUid('${user.uid}')">删除</a></td>
	          </tr>     
          </c:forEach>
        </tbody>
      </table>
      <br>
    </div>
  </div><!-- container -->

  <!-- 用户详细信息Modal : showUserDetail -->
  <div class="modal fade" id="showUserDetail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详细信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" method="post">
            <div class="form-group row">
              <label for="forShowUsername" class="col-sm-3 col-form-label text-center">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowUsername" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowRealname" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowPassword" class="col-sm-3 col-form-label text-center">密码</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowPassword" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowCellphone" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowEmail" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowGender" class="col-sm-3 col-form-label text-center">性别</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowGender" readonly value="">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowResume" class="col-sm-3 col-form-label text-center">简介</label>
              <div class="col-sm-9">
                <textarea id="forShowResume" name="" class="form-control" readonly></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    function deleteUserByUid(uid){
    	  var flag = confirm("确定删除？");
    	  if(flag){
    	    window.location.href="/LostAndFound/userList?method=deleteUserByUid&uid="+uid;
    	  }
    }
    function showUserDetailByUid(uid){
    	$.post(
    	  "/LostAndFound/userList?method=showUserDetailByUid&uid="+uid,
    	  {"uid":uid},
    	  function(data){
    		  console.log(data);
    	      $("#forShowUsername").val(data.username);
    	      $("#forShowPassword").val(data.password);
    	      $("#forShowRealname").val(data.realname);
    	      $("#forShowCellphone").val(data.cellphone);
    	      $("#forShowEmail").val(data.email);
    	      $("#forShowResume").val(data.resume);
    	      if(data.gender == 0){
    	        $("#forShowGender").val("男");       
    	      }else{
    	        $("#forShowGender").val("女");               
    	      }
    	  },
    	  "json"
    	);
    }
  </script>
</body>
</html>